Video Title: Build an AI Voice Dental Assistant with Next.js & Postgres - Full SaaS Tutorial
Video ID: MhGV5TekJ8Y
Video URL: https://www.youtube.com/watch?v=MhGV5TekJ8Y
Export Date: 2025-11-06 20:50:31
Channel: Codesistency
Format: plain
================================================================================

Building Dentwise: A Modern Dental Platform with AI Voice Assistant and Full-Stack Functionality

In today’s post, we’ll explore the journey of building Dentwise, a comprehensive dental platform featuring a sleek landing page, appointment booking system, admin dashboard, and an AI-powered voice assistant. This project leverages cutting-edge technologies including Next.js, Tailwind CSS, Prisma, Clerk, and VPY AI, wrapped in a seamless full-stack development experience.
• --

Overview of Dentwise Features

Dentwise is designed to offer users a unified platform for dental care management:
• Modern Landing Page: Eye-catching UI with gradients, animations, and responsive design.
• Authentication: Supports sign-up/sign-in via Google, GitHub, and email/password with six-digit verification.
• Appointment Booking: A guided three-step process—select dentist, choose service/date/time, and confirm booking with email notifications.
• Admin Dashboard: Manage doctors, appointments, and monitor analytics with real-time updates.
• AI Voice Agent: An interactive voice assistant providing dental info, tips, and support, available on paid subscription plans.
• Subscription Plans & Payments: Free and two paid plans with billing optimized for upgrades and prorated payments.
• Email Notifications: Automatic appointment confirmations sent using Resend.com.
• Version Control & Code Quality: GitHub workflows with branch management, pull requests, and AI-powered code review using CodeRabbit.
• Deployment: Hosted on Savala, leveraging developer-friendly features and free credits.
• --

Technology Stack
• Frontend: Next.js (app router, server components), Tailwind CSS, ShadCN UI components, Lucide React icons.
• Backend: Prisma ORM with PostgreSQL (Neon provider), Clerk for authentication and payments.
• AI Integration: VPY AI for voice assistant capabilities.
• Email: Resend.com for transactional emails.
• Developer Tools: Git & GitHub, CodeRabbit for code reviews.
• Hosting: Savala platform.
• --

Development Highlights
• Setting Up Next.js and UI Components
• Initialized a Next.js app with TypeScript, Tailwind CSS, and ShadCN UI for ready-to-use components.
• Customized a dark purple theme using TweakCN.
• Created reusable components for the landing page (header, hero, pricing, footer) with responsive design and animations.
• Authentication with Clerk
• Integrated Clerk to handle user authentication effortlessly with pre-built UI components.
• Supported multiple sign-in methods and email verification.
• Synced authenticated users from Clerk to the local database using a server action, ensuring data consistency.
• Database Design with Prisma
• Defined models for User, Doctor, and Appointment with relations and enums (e.g., gender, appointment status).
• Leveraged Prisma to generate type-safe database queries.
• Implemented cascading deletes for appointments when users or doctors are removed.
• Admin Dashboard
• Built a secure admin page with environment variable-controlled access.
• Features include doctor management (add/edit profiles with avatars), viewing and updating appointment statuses.
• Used React Query (TanStack Query) for efficient data fetching and cache invalidation.
• Added UI components for stats, welcome messages, doctor lists, and recent appointments.
• Subscription Plans and Payments
• Created plans (Free, AI Basic, AI Pro) in Clerk dashboard with features and pricing.
• Integrated Clerk’s billing UI for managing subscriptions.
• Implemented logic to check user plan status for feature access control.
• Handled plan upgrades with prorated payments.
• AI Voice Assistant Integration
• Used VPY AI to develop an interactive voice assistant named Riley.
• Configured assistant with system prompts and first messages to guide conversations about dental services.
• Implemented client-side widget handling call lifecycle events, messages, and speech animation.
• Enabled voice agent access exclusively for paid subscribers.
• Appointment Booking Workflow
• Developed a step-by-step appointment booking UI:
• Step 1: Dentist selection from active doctors.
• Step 2: Appointment type, date, and available time selection with real-time slot availability.
• Step 3: Booking confirmation with summary and modification options.
• Server actions validate and create appointments linked to users and doctors.
• Implemented optimistic UI updates and error handling with toasts.
• Displayed user’s upcoming and past appointments with detailed info.
• Email Notifications with Resend.com
• Configured transactional email sending via API route.
• Built React email templates for appointment confirmations.
• Ensured email delivery with domain management and API keys.
• Sent detailed appointment info including doctor, date/time, service, and pricing.
• Deployment with Savala
• Prepared the app for production including Prisma generate in build scripts.
• Deployed on Savala with environment variables configured for Clerk, database, VPY, and Resend.
• Used Next.js’ unoptimized image setting to resolve image loading issues.
• Verified full live functionality including authentication, booking, AI voice, admin controls, and emails.
• --

Developer Workflow & Best Practices
• Git Branching: Created feature branches for landing page, Prisma schema, admin page, pro page, voice page, dashboard, appointments, email sending, and deployment.
• Pull Requests & Code Review: Leveraged CodeRabbit AI to identify improvements, errors, and best practices before merging.
• Server Actions & Client Hooks: Followed a clean separation of server-side logic and client-side React hooks using Next.js app router conventions.
• Environment Variables: Managed sensitive keys securely and adapted URLs for deployment.
• UI Reusability: Utilized ShadCN components and custom components for consistency and efficiency.
• Error Handling & Loading States: Provided user feedback during data fetching and mutations.
• --

Conclusion

Building Dentwise has been an exciting journey integrating modern web development with AI capabilities to create a user-friendly, functional dental platform. From setting up authentication and databases to crafting admin tools and voice interactions, this project demonstrates full-stack best practices with scalable technologies.

If you’re interested, the full source code is freely available, and you can leverage this project as a foundational template for similar SaaS platforms.
• --

Ready to Build Your Own?

Whether you’re a developer looking to expand your skills or a dental professional exploring tech solutions, building a platform like Dentwise is within your reach. Follow along with the detailed tutorials, use the recommended tools, and bring your ideas to life!
• --

Happy coding and here’s to better dental care powered by technology!